<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>选择体检日期</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="date-box">
                <i class="fa fa-caret-left" @click="subMonth()"></i>
                <p>{{year}}年{{month}}月</p>
                <i class="fa fa-caret-right" @click="addMonth()"></i>
            </div>
            <table>
                <tbody>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
                </tbody>
            </table>
            <ul>
                <li v-for="(day,index) in calendarArr" :key="index">
                    <p :class="{'pselect':day.ymd!=null?day.ymd.split('-')[2]==currDay:false,'upselect':isDaySelected(day)&&((day.remainder!=0)&&(day.remainder!=null)),'fontcolor':day.ymd==null?false:((day.remainder!=0)&&(day.remainder!=null))}" @click="selectDay(day)"><!-- 为当天添加标记并处理ymd为null的情况 -->
                        {{ day.ymd==null?"":day.ymd.split("-")[2] }}<!-- 显示每月几日数字 -->
                    </p>
                    <p>{{(day.remainder!=0)&&(day.remainder!=null)?"余"+day.remainder:"" }}</p><!-- 有剩余预约数则显示 -->
                </li>
            </ul>
        </section>

        <div class="bottom-btn">
            <div></div>
            <div @click="goConfirmorder()">下一步</div>
        </div>
        
        <div class="bottom-ban"></div>
        <FooterView>
           
        </FooterView>
    </div>
</template>

<script> 
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
import {reactive,toRefs} from 'vue';
import FooterView from '@/components/FooterView.vue'
import { getSessionStorage, noLogin,setSessionStorage } from '@/common';
export default {
    setup(){
        const router = useRouter();
        const route = useRoute();
        const currDate=new Date();//js内置日期
        const state=reactive({
            selectedDay:null,
            hpId:route.query.hpId,
            smId:route.query.smId,
            currYear:currDate.getFullYear(),
            currMonth:currDate.getMonth()+1,//月份从0开始，+1
            currDay:String(currDate.getDate()).padStart(2,"0"),
            calendarArr:[],
            month:currDate.getMonth()+1,
            year:currDate.getFullYear(),
        });
        const userdata=getSessionStorage("userdata");
        if(!state.hpId||!state.smId||!userdata){
            noLogin();
            return {};
        }
        function isDaySelected(day){
            if (!day.ymd || !this.selectedDay) return false;
            return day==state.selectedDay;
        }
        function selectDay(day){ 
            state.selectedDay=day;
        }
        function loadCalendar(){ 
            axios.post("/api/calendarList",{hpId:state.hpId,year:state.year,month:state.month})
            .then((response)=>{ 
                state.calendarArr=response.data.data;
                console.log(state.calendarArr);
                console.log(state.currDay);
            })
            .catch((error)=>{console.log("error:"+error)});
        }

        function goConfirmorder(){ 
            if(state.selectedDay==null||state.selectedDay.remainder==null||state.selectedDay.remainder==0){
                alert("请选择其他预约时间");
                return {};
            }
            axios.post("/api/checkorder",{
                orderDate:state.selectedDay.ymd,
                userId:state.userid,
                hpId:state.hpId,
                smId:state.smId,
                state:1,
            })
            .then((response)=>{ 
                if(response.data.status==200){
                    setSessionStorage("selectedDay",state.selectedDay.ymd);
                router.push({
                path:"/confirmorder",
                query:{
                    hpId:state.hpId,
                    smId:state.smId,
                }
            })
                }
                else{
                    alert("您在该医院已预约了相同套餐，请先完成该体检");
                    console.log(response.data);
                }
            })
            .catch((error)=>{console.log("error:"+error)});
            
        }
        function subMonth(){
            if(state.month>1){
                state.month--;
            }else{
                state.month=12;
                state.year--;
            }
            loadCalendar();
            }
        function addMonth(){
            if(state.month<12){
                state.month++;
            }else{
                state.month=1;
                state.year++;
            }
            loadCalendar();
        }
        loadCalendar();

        return{ ...toRefs(state),loadCalendar,goConfirmorder,isDaySelected,selectDay,subMonth,addMonth}
    },
    components: {
        FooterView
    },
}
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header{
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}
header .fa{
    font-size: 8vw;
}


/*********************** common样式 ***********************/
.top-ban{
    width: 100%;
    height: 15.7vw;
}
.bottom-ban{
    width: 100%;
    height: 14.2vw;
}

/*********************** section ***********************/
section{
    width: 82vw;
    margin: 0 auto;
    margin-top: 12vw;
}
section .date-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.5vw;
    font-weight: 600;
}
section .date-box p{
    color: #000;
}
section .date-box i{
    color: #999;
    user-select: none;
    cursor: pointer;
}
section table{
    width: 100%;
    font-size: 3.8vw;
}
section table tr th{
    text-align: center;
    font-weight: 600;
    line-height: 12vw;
}

section ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
section ul li{
    width: 14.28%;
    height: 12vw;
    font-weight: 600;
    color: #999;
}
section ul li p:first-child{
    width: 6vw;
    height: 6vw;
    margin: 0 auto;
    border-radius: 3vw;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 4.2vw;

    user-select: none;
    cursor: pointer;
}
section ul li p:last-child{
    font-size: 3vw;
    font-weight: 300;
    text-align: center;
    user-select: none;
}

.fontcolor {
    color: #333;
}

.pselect{
    background-color: #FB902B;
    color: #FFF;
}
.upselect{
    background-color: #05f140;
    color: #FFF;
}

/*********************** bottom-btn ***********************/
.bottom-btn{
    width: 100%;
    height: 12vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    bottom: 14.2vw;

    display: flex;
}
.bottom-btn div:first-child{
    flex: 2;
}
.bottom-btn div:last-child{
    flex: 1;
    background-color: #117C94;
    text-align: center;
    line-height: 12vw;
    font-size: 5vw;
    color: #FFF;

    user-select: none;
    cursor: pointer;
}
</style>